<script setup>
import { Plus } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { getChatMenuList, addChatMenu } from "../../services/chat";
import ChatMenuItem from "../../components/ChatMenuItem.vue";
import { useChatMenuIdStore } from "../../store/ChatMenuStore";
import { bus } from "../../mitt/mitt";
defineProps({});
//store
const chatMenuIdStore = useChatMenuIdStore();
//监听新增菜单item

//菜单
const chatMenuList = ref();
const f_getChatMenuList = function () {
  chatMenuList.value = [];
  getChatMenuList({})
    .then((res) => {
      chatMenuList.value = res.data;
      if (res.data.length > 0) {
        chatMenuIdStore.setChatMenuId(res.data[0].id);
      }else{
        chatMenuIdStore.setChatMenuId("")
      }
    })
    .catch((error) => {});
};

//新增
const addChatMenuDto = {
  chatMenuName: "新对话窗口",
};
const f_addChatMenu = function () {
  addChatMenu(addChatMenuDto)
    .then((res) => {
      f_getChatMenuList();
    })
    .catch((error) => {});
};

//子传父回调
const f_updateMenuItem = function () {
  f_getChatMenuList();
};
//Mounted钩子
onMounted(() => {
  f_getChatMenuList();
  bus.on("addChatMenu", (info) => {
    f_getChatMenuList();
  });
});
//菜单列表
</script>

<template>
  <div class="chat-menu">
    <el-menu
      :default-active="chatMenuIdStore.getChatMenuId"
      class="el-menu-vertical-demo"
    >
      <el-button
        class="el-button"
        type="primary"
        :icon="Plus"
        @click="f_addChatMenu"
        >新增聊天菜单</el-button
      >
      <el-divider class="el-divider" />
      <ChatMenuItem
        class="ChatMenuItem"
        v-for="item in chatMenuList"
        :key="item.id"
        :menuItem="item"
        @menu-item-updated="f_updateMenuItem"
      />
    </el-menu>
  </div>
</template>

<style lang="less" scoped>
.chat-menu {
  height: 100%;
  .el-button {
    width: 60%;
    margin-left: 20%;
    height: 40px;
  }
  .el-menu-vertical-demo {
    height: 100%;
    .ChatMenuItem {
      height: 60px;
    }
    .el-divider {
      margin-bottom: 0px;
      margin-top: 20px;
    }
  }
}
</style>
